<template>
	<card-box title="通知公告" goto="/announcement/list">
		<div class="announcement_wrapper">
			<div class="item" v-for="(item, index) in tableData" :key="index">
				<template v-if="$isHasAuth(['971a7252fcdc412d8cb508dfc8441fc8'])">
					<router-link class="title" :to="{ path: `/announcement/${item.id}` }">{{ item.title }}</router-link>
				</template>
				<template v-else>
					<span class="title">{{ item.title }}</span>
				</template>
				<div class="date">{{ item.releaseTime }}</div>
			</div>
		</div>
	</card-box>
</template>

<script>
import cardBox from '@/views/common/cardBox';
import { tbSysJournalismQuery } from '@/api/system/tbSysJournalism';
export default {
	components: { cardBox },
	data() {
		return {
			tableData: []
		};
	},
	mounted() {
		this.getAnnouncementData();
	},
	methods: {
		//获取公告列表
		async getAnnouncementData() {
			let params = { page: 1, limit: 9, del: '1' };
			let result = await tbSysJournalismQuery(params).then((res) => res.data);
			if (result.code === '0') {
				this.tableData = result.data || [];
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.announcement_wrapper {
	display: flex;
	flex-direction: column;
	height: 410px;

	.item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 26px;
		line-height: 26px;
		padding: 10px 0;
	}

	.title {
		font-size: 16px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: #606266;
	}
	
	a.title:hover {
		color: var(--primary-hover);
		text-decoration: underline;
	}

	.date {
		flex-shrink: 0;
		color: #909399;
	}
}
</style>
